<template>
  <a-table row-key="id" :columns="columns" :data="data" :scroll="{ x: true }" :pagination="pagination">
    <template #feeCategoryName="{ record }">
      <div v-if="record.installment == 0">{{ record.feeName }}</div>
      <div v-else>{{ record.feeCategoryName }} - {{ record.feeName }}</div>
    </template>
    <template #dueDate="{ record }">
      <div> {{ record.dueDate ? dayjs(record.dueDate).format('YYYY-MM-DD') : '-' }}</div>
    </template>
    <template #confirmInfo="{ record }">
      <div> {{ record.confirmUserName }}</div>
      <div>{{ record.confirmTime }}</div>
    </template>
  </a-table>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { getFeeInfoList } from '@/api/asset/carTransfer'
  import dayjs from 'dayjs'
  const props = defineProps({
    carId: {
      type: [Number, String],
    },
    type: {
      type: [Number, String],
    },
    code: {
      type: [Number, String],
    },
  })

  const pagination = { pageSize: 1000 }

  const queryParam = reactive({
    feeCategoryList: [6],
    carId: props.carId,
    businesCode: props.code,
  })

  const data = ref([])

  // table 配置
  const columns = reactive([
    { title: '费用名称', dataIndex: 'feeCategoryName', width: 160, slotName: 'feeCategoryName', fixed: 'left' },
    { title: '费用类型', dataIndex: 'feeTypeName', width: 120 },
    { title: '收支类型', dataIndex: 'costTypeName', width: 120 },
    {
      title: '应结日期',
      dataIndex: 'dueDate',
      slotName: 'dueDate',
      width: 140,
    },
    { title: '费用金额(元)', dataIndex: 'totalAmount', width: 140 },
    { title: '实结金额(元)', dataIndex: 'payAmount', width: 140 },
    { title: '待结金额(元)', dataIndex: 'outstandingAmount', width: 140 },
    { title: '生成节点', dataIndex: 'createNodeName', width: 120 },
    { title: '生成时间', dataIndex: 'createTime', width: 180 },
    { title: '收支方式', dataIndex: 'payTypeName', width: 120 },
    { title: '费用状态', dataIndex: 'feeStatusName', width: 120 },
    { title: '确认时间', dataIndex: 'confirmTime', width: 180 },
    { title: '确认人', dataIndex: 'confirmUserName', width: 120 },
    { title: '费用备注', dataIndex: 'remark', ellipsis: true, width: 140 },
    { title: '结算备注', dataIndex: 'settlementRemark', ellipsis: true, width: 140 },
    { title: '确认对账信息', width: 200, slotName: 'confirmInfo' },
    { title: '流水号', dataIndex: 'recordCode', width: 140 },
    { title: '流水状态', dataIndex: 'recordStatusName', width: 140 },
    { title: '流水确认信息', dataIndex: 'recordConfirmTime', width: 140 },
  ])
  // 列表接口调用
  const loadData = () => {
    getFeeInfoList({ ...queryParam }).then((res) => {
      if (res.code == 200) {
        data.value = res.result.carAssetFeeList || []
      }
    })
  }

  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .second-stage {
    width: 200px;
    margin-left: 260px;
  }
  .third-stage {
    width: 200px;
    margin-left: 30px;
  }
  .btn-box {
    display: flex;
    justify-content: space-between;
    padding: 18px;
    align-items: center;
  }
  .blue-text {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #3370ff;
    cursor: pointer;
  }
</style>
